/*
 * @Description: 切换车票类型组建
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:39:51
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-22 20:56:51
 */
<template>
  <div class="type_area">
    <div class="type_title flex-h">
      <div
        v-for="(name, index) in  nameList"
        :key="index"
        class="type_name fontsize32"
        :class="typeIndex === index ? 'selected_type' : ''"
        @click="changeType(index,direction)"
      >{{name}}</div>
      <div
        class="type_bg"
        style="border-radius: 25px"
      ></div>
    </div>
    <choose-time
      ref="chooseTime"
      :typeIndex="typeIndex"
      :direction="direction"
      @toRequest="toRequest"
      @getTicketDate="getTicketDate"
    ></choose-time>
  </div>
</template>

<script>
import { getRouteQueryDate } from './../../interface/getInterface'
export default {
  props: {
    direction: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      nameList: ['日票', '周票', '月票'], //  车票类型
      typeIndex: -1 // 车票类型下标
    }
  },
  mounted() {
    this.changeType(0, this.direction)// 默认0日票，1上行
  },
  methods: {
    toRequest() {
      this.changeType(this.typeIndex, this.direction)
    },
    changeType(num, direction) { // 切换车票类型
      let option = this.$refs.chooseTime.stateOption
      this.$parent.$refs.choosePopulation.population = 1// 切换票类型乘车人数重置为1
      if ((!option.mask || option.index > 0) && (this.typeIndex !== num || this.$refs.chooseTime.requestType === 2 || direction)) { // 下方数据加载时或切换类型就是当前类型时不可切换车票类型，其他情况可切换类型
        option.mask = true
        option.index = 0
        this.typeIndex = num
        let bg = document.querySelector('.type_bg')
        let bgWidth = bg.clientWidth
        bg.style.left = num * bgWidth + 'px'
        let params = {
          PAGE_CAPACITY: 10,
          PAGE_INDEX: 1,
          TICKET_DATE_TYPE: num + 1
        }
        getRouteQueryDate(params).then(data => {
          this.$refs.chooseTime.timeList = data.LIST
          option.mask = false
          option.index = 0
          this.$refs.chooseTime.chooseIndex = -1
          this.$refs.chooseTime.getThisTimeData(0, direction)
        }).catch(err => {
          console.log(err)
          option.mask = true
          option.index = 1
          this.$refs.chooseTime.requestType = 2
        })
      }
    },
    getTicketDate(ticketDate) {
      this.$parent.$refs.choosePopulation.population = 1// 切换日期乘车人数重置为1
      window.localStorage.setItem('ticket_info', JSON.stringify({
        TICKET_DATE_TYPE: this.typeIndex + 1,
        DATE: ticketDate
      }))
    }
  }
}
</script>

<style lang="scss" scoped>
.type_area {
  .type_title {
    width: 686px;
    height: 68px;
    margin: auto;
    background-color: #f0f4fd;
    border-radius: 46px; /*no*/
    position: relative;
    .type_name {
      width: 100%;
      height: 68px;
      line-height: 68px;
      text-align: center;
      border-radius: 25px; /*no*/
      position: relative;
      z-index: 1;
      transition: all 0.5s;
      color: #027aff;
    }
    .selected_type {
      color: #fff;
    }
    .type_bg {
      width: calc(100% / 3);
      height: 68px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #027aff;
      border-radius: 25px; /*no*/
      transition: all 0.5s;
    }
  }
}
</style>
